<style lang="scss" rel="stylesheet/scss">
    .j-comment-list{
        .comment-item {
            padding: 0.8rem 1rem;
            color: #333;
            display: flex;
            .left {
                flex:0 0 2.4rem;
                img {
                    width:2.4rem;
                    height:2.4rem;
                    border-radius: 50%;
                }
            }
            .right {
                flex: 1;
                padding: 0.4rem 0 0 0.8rem;
                .top {
                    display: flex;
                    .nick-name {
                        flex:1;
                    }
                    .caozuo-btn {
                        flex: 0 0 7rem;
                        text-align: right;
                        span {
                            border: 1px solid #666;
                            color: #666;
                            font-size: 0.7rem;
                            padding: 0.1rem 0.3rem;
                            border-radius: 4px;
                            line-height:1.5rem;
                            margin-left: 1rem;
                        }
                    }
                }
                .con {
                    padding:0.5rem 0;
                    color:#444;
                    &>p {
                        line-height: 1.2rem;
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                        height: 3.5rem;
                    }
                    .ta-comment-list {
                        padding:0.8rem 0.5rem;
                        background: #f5f5f5;
                        margin: 0.5rem 0;
                        border-radius: 4px;
                        p {
                            color:#666;
                            line-height: 1.2rem;
                        }
                        .comment-more {
                            text-align:center;
                            border-top: 1px solid #999;
                            margin-top:0.5rem;
                            line-height:1.5rem;
                        }
                    }
                }
                .bottom {
                    display:flex;
                    line-height:1.5rem;
                    .time {
                        color:#888;
                        flex:0 0 6rem;
                    }
                    .zan {
                        flex:1;
                        display:flex;
                        .iconfont {
                            color:#666;
                            flex:1;
                        }
                    }
                }
            }
        }
        
    }
</style>
<template>
    <div class="j-comment-list">
        <div class="comment-item">
            <div class="left">
                <img src="../../assets/user_img.jpg" alt="">
            </div>
            <div class="right">
                <div class="top">
                    <p class="font-big-normal nick-name">用户昵称</p>
                    <p class="font-normal caozuo-btn">
                        <span>删除</span> 
                        <span>回复</span>
                    </p>
                </div>
                <div class="con">
                    <p class="font-mormal">新华网北京1月5日电 5年来，应对诸多内外因素复杂变化的考验，中国经济实力再上新台阶，结构出现重大变革，创新的澎湃动能迸hhhhhh</p>
                    <div class="font-normal-small ta-comment-list">
                        <p class="item">用户昵称1：说的对</p>
                        <p class="item">用户昵称1：说的对</p>
                        <p class="item">用户昵称1：说的对</p>
                        <p class="item">用户昵称1：说的对</p>
                        <p class="font-small comment-more">展开全部32条回复</p>
                    </div>
                </div>
                <div class="bottom font-small">
                    <p class="time">1小时前</p>
                    <p class="zan">
                        <span class="iconfont icon-dianzan"> 666</span>
                        <span class="iconfont icon-dianzan"> 888</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {

            }
        },
        props: {
            userinfo:{
                type:Object
            }
        },
        created () {

        },
        methods: {
            
        }
    }
</script>

